<template>
	<view class="container">
		<view class="content-bg">
			<image class="bg-image" src="/static/image/mine/agent-bg.png" mode="widthFix"></image>
		</view>
		<view class="content-wrapper">
			<view class="content">
				 <view class="content-input">
				 	<view class="content-input-title">
				 		成为代理
				 	</view>
					<view class="content-input-box flex justify-between">
						<view class="content-input-box-name">
							姓名
						</view>
						<input type="text"  placeholder="请输入姓名"/>
					</view>
					<view style="top: 230rpx;" class="content-input-box flex justify-between">
						<view class="content-input-box-name">
							手机号
						</view>
						<input type="text"  placeholder="请输入手机号"/>
					</view>
					<view class="content-input-btn" @click="subMit">
						提交申请
					</view>
				 </view>
				 <view class="content-tip">
				 	<view class="tip-title">
				 		做代理商权益：
				 	</view>
					<view class="tip-item">
						1、县级代理：代理费5000元，有独立的代理后台，可实时了解
						自己团队的推广情况。可获得团队当年发展的所有新付费年度会
						员每人2.00元的奖励，季度发放，不累计；可享受团队一年内推
						广的所有付费年度会员在第二年续缴年度会员费的返佣（返佣标
						准为：第二年1.50元/个）；：
					</view>
					<view class="tip-item">
						2、市级代理：代理费10000元，有独立的代理后台，可实时了
						解自己团队的推广情况。可获得团队当年发展的所有新付费年度
						会员每人2.00元的奖励，季度发放，不累计；可享受团队一年内
						推广的所有付费年度会员第二年至第三年续缴年度会员费的返佣
						（返佣标准为：第二年1.50元/个；第三年1.50元/个）；
					</view>
					<view class="tip-item">
						3、省级代理：代理费50000元，有独立的代理后台，可实时了
						解自己团队的推广情况。可获得团队当年发展的所有新付费年度
						会员每人2.00元的奖励，季度发放，不累计；可享受团队一年内
						推广的所有付费年度会员第二年至第四年续缴年度会员费的返佣
						（返佣标准为：第二年1.50元/个；第三年1.50元/个；第四年1.5
						0元/个）；
					</view>
					<view class="tip-item">
						4、全国代理：代理费100000元，有独立的代理后台，可实时了
						解自己团队的推广情况。可获得团队当年发展的所有新付费年度
						会员每人2.00元的奖励，季度发放，不累计；可享受团队一年内
						推广的所有付费年度会员第二年至第五年续缴年度会员费的返佣
						（返佣标准为：第二年1.50元/个；第三年1.50元/个；第四年1.5
						0元/个；第五年1.50元/个）。
					</view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 提交申请
			subMit(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '申请成为代理商需要推荐人数达到50人您目前还不满足此条件，无法申请',
					confirmColor:"#000000",
					cancelColor:"#999999",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$helper.to('/pages/views/managementEdit/managementSuccess')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.content-bg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	.bg-image {
		width: 100%;
		display: block;
	}
}

.content-wrapper {
	position: relative;
	z-index: 2;
	height: 100vh;
	overflow-y: auto;
	padding-top: 20rpx; /* 根据需要调整 */
}

page {
	background-color: #fff;
	height: 100%;
}

.content {
	width: 100%;
	padding-bottom: 50rpx;
	
	.content-input {
		width: 670rpx;
		height: 523rpx;
		background-image: url('/static/image/mine/agent-bg1.png');
		background-repeat: no-repeat;
		background-size: cover;
		margin: 0 auto;
		margin-top: 700rpx;
		position: relative;
		
		.content-input-title {
			position: absolute;
			font-weight: bold;
			font-size: 36rpx;
			color: #EB4747;
			left: 50%;
			transform: translate(-50%);
			top: 35rpx;
		}
		
		.content-input-box {
			position: absolute;
			top: 130rpx;
			width: 90%;
			padding: 20rpx;
			left: 50%;
			transform: translate(-50%);
			border-bottom: 1rpx solid #EFEFEF;
			
			.content-input-box-name {
				width: 20%;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			
			input {
				width: 70%;
				text-align: right;
				font-weight: 400;
				font-size: 30rpx;
				color: #CCCCCC;
			}
		}
		
		.content-input-btn {
			position: absolute;
			top: 350rpx;
			width: 586rpx;
			height: 98rpx;
			padding: 20rpx;
			left: 50%;
			transform: translate(-50%);
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			background-color: #EB4747;
			text-align: center;
			border-radius: 20rpx;
		}
	}
	
	.content-tip {
		padding: 25rpx;
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 40rpx 20rpx 0;
		
		.tip-title {
			font-weight: bold;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
		
		.tip-item {
			margin-bottom: 20rpx;
			font-size: 28rpx;
			line-height: 1.6;
		}
	}
}
</style>